<template>
	<view>
		<u-navbar title="表格详情" @leftClick='leftClick' :fixed="false" :autoBack="false" :safeAreaInsetTop="true"
			style="width: 100%;" />


		<view class="table">
			<scroll-view scroll-x="true" scroll-y="true" class="scroll-view-fileList">
				<table class="scroll-view-uni-table" ref="table" border stripe emptyText="暂无更多数据">
					<tr>
						<th v-for="(col, colIndex) in TbaleList.columns" :key="colIndex">
							{{ col.title }}
						</th>
					</tr>
					<tr v-for="(row, rowIndex) in TbaleList.data" :key="rowIndex">
						<td v-for="(col, colIndex) in TbaleList.columns" :key="colIndex">
							{{ row[col.key] }}
						</td>
					</tr>
				</table>
			</scroll-view>

		</view>

	</view>


	</view>
</template>
<script>
	export default {
		data() {
			return {

				TbaleList: [

				]
			};
		},
		onLoad(val) {
			var that = this
			plus.screen.lockOrientation('landscape-primary');
			var list = val.list
			that.TbaleList = JSON.parse(list)
			console.log(that.TbaleList);
		},

		onShow() {


		},
		methods: {

			leftClick() {
				// uni.navigateBack({
				// 	delta: 1,
				// 	success() {
				// 		plus.screen.lockOrientation('portrait-primary');
				// 	}
				// })
				uni.navigateTo({
					url: './AiRotate',
					animationType: 'none', // 动画类型
				});
			},
			addClockStatus(str) {
				var that = this
			},

		}
	}
</script>

<style lang="scss">
	.table {
		width: 100%;
		overflow: hidden;
		border-radius: 10px;
		border: 1px solid #d4d4d4;

		.uni-section2 {
			background-color: #dcdcdc;
			font-weight: 600;
		}

		table {
			width: 100%;
			border-collapse: collapse;
			color: #fff;

			tr {
				th {
					text-align: center;
					color: #000;
					font-size: 10px;
					height: 34px;
					white-space: nowrap;
					padding: 0 5px;
					border: 1px solid #d4d4d4;
					background: #e7e7e7;
					position: sticky;
					z-index: 10;
					position: sticky;
					top: 0;
				}

				td {
					text-align: center;
					font-size: 10px;
					height: 34px;
					white-space: nowrap;
					padding: 0 5px;
					border: 1px solid #d4d4d4;
					color: #000;
					position: relative;
				}
			}
		}
	}

	.scroll-view-fileList {
		width: 100%;
		white-space: nowrap;
		border-radius: 20rpx;
		height: auto;
		max-height: 80vh;
		.scroll-view-uni-table {
			min-width: auto;
			overflow: visible !important;
		}
	}


</style>